<template>
  <div class="clooect">
    <div class="left">
      <div>
        <img
          class="Img"
          :src="`http://121.199.51.160:8080${item.houseImg}`"
          alt=""
        />
      </div>
    </div>

    <div class="right">
      <div>{{item.title}}</div>
      <div>{{item.desc}}/</div>
      <div><span>{{item.tags[0]}}</span></div>
      <div><span>{{item.price}} </span>元/月</div>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    item:{
      type:Object
    }
  }
};
</script>

<style>
.clooect {
display: flex;
  flex-direction: row;
  align-items: center;
  height: 120px;
  border-bottom: 1px solid #e5e5e5;
}
.right {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-left: 12px;
}
.right div:first-child {
  font-size: 15px;
  color: #394043;
  font-weight: 700;
}
.right div:nth-child(2) {
  font-size: 12px;
  color: #afb2b3;
  margin: 4px 0 4px;
}
.right div:nth-child(3) span {
  display: inline-block;
  color: #39becd;
  background: #e1f5f8;
  font-size: 11px;
  padding: 2px;
  border-radius: 5px;
}
.right div:nth-child(4) {
margin-top: 3px;
  color: red;
  font-size: 12px;
}
.right div:nth-child(4) span{
  font-weight: 700;
  font-size: 16px;
}
.Img {
  width: 106px;
  height: 80px;
}
</style>
